<template>
  <div class="appcontainer">
    <div class="toptips">
      <span style="font-size: 18px;margin-right: 26px;" v-if="language == 'zh'">筛选</span>
      <span style="font-size: 18px;margin-right: 26px;" v-else>filter</span>
      <div style="display: flex;align-items: center;">
        <img src="../../../img/alarm.png" alt="" style="width: 12px;height: 12px;margin-right: 7px;">
        <span style="color: #999;font-size: 14px;" v-if="language == 'zh'">如果留空筛选器将不被使用</span>
        <span style="color: #999;font-size: 14px;" v-else>If left blank, the filter will not be used</span>
      </div>
    </div>
    <div class="searchContent" v-if="language == 'zh'">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
        <el-form-item label="数据集名称" prop="datasetName">
          <el-input v-model="queryParams.datasetName" placeholder="请输入数据集名称" clearable @keyup.enter.native="handleQuery"
            style="width: 200px;" size="small" />
        </el-form-item>
        <el-form-item label="疾病" prop="disease">
          <el-select v-model="queryParams.disease" placeholder="请选择" filterable style="width: 200px;"
            :popper-append-to-body="false" popper-class="customDropdown" clearable>
            <el-option v-for="item in diseaseList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源" prop="source">
          <el-input v-model="queryParams.source" placeholder="请输入来源" clearable @keyup.enter.native="handleQuery"
            style="width: 200px;" size="small" />
        </el-form-item>
        <el-form-item label="平台" prop="platform">
          <el-input v-model="queryParams.platform" placeholder="请输入平台" clearable @keyup.enter.native="handleQuery"
            style="width: 200px;" size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            style="margin-left: 20px;">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="searchContent" v-else>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="150px">
        <el-form-item label="Dataset name" prop="diseases">
          <el-input v-model="queryParams.keyWord" placeholder="Please enter the dataset name" clearable
            @keyup.enter.native="handleQuery" style="width: 200px;" size="small" />
        </el-form-item>
        <el-form-item label="disease" prop="studyTypes">
          <el-select v-model="queryParams.studyTypes" placeholder="Please select" filterable style="width: 200px;"
            :popper-append-to-body="false" popper-class="customDropdown" clearable>
            <el-option v-for="item in studyTypeList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="source" prop="keyWord">
          <el-input v-model="queryParams.keyWord" placeholder="Please enter the source" clearable
            @keyup.enter.native="handleQuery" style="width: 200px;" size="small" />
        </el-form-item>
        <el-form-item label="platform" prop="studyTypes">
          <el-select v-model="queryParams.studyTypes" placeholder="Please select" filterable style="width: 200px;"
            :popper-append-to-body="false" popper-class="customDropdown" clearable>
            <el-option v-for="item in studyTypeList" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            style="margin-left: 20px;">search</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">reset</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableContent" v-if="language == 'zh'">
      <el-table v-loading="loading" :data="tableList" @sort-change="handleSortData">
        <el-table-column label="数据集名称" align="left" header-align="center" prop="datasetName" sortable="custom" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.datasetName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="疾病" align="left" header-align="center" prop="disease" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="来源" align="left" header-align="center" prop="source" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="样本数量" align="right" header-align="center" prop="sampleNum" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="平台" align="left" header-align="center" prop="platform" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="差异基因个数" align="right" header-align="center" prop="differentialGenesNum"
          sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="P值" align="right" header-align="center" prop="pValue" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="表达倍数变化" align="left" header-align="center" prop="expressionChange" sortable="custom" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <div class="tableContent" v-else>
      <el-table v-loading="loading" :data="tableList" @sort-change="handleSortData">
        <el-table-column label="Dataset name" align="left" header-align="center" prop="datasetName" sortable="custom" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.datasetName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="disease" align="left" header-align="center" prop="disease" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="source" align="left" header-align="center" prop="source" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="Number of samples" align="right" header-align="center" prop="sampleNum" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="platform" align="left" header-align="center" prop="platform" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="Number of differentially expressed genes" align="right" header-align="center" prop="differentialGenesNum"
          sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="P value" align="right" header-align="center" prop="pValue" sortable="custom" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="Expression fold change" align="left" header-align="center" prop="expressionChange" sortable="custom" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HospitalwebsiteSwbzwzydzl',

    data() {
      return {
        language: '',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dataLanguage: null,//必传
          datasetName: null,//非必传
          disease: null, //疾病(下拉接口:/system/dict/data/list?pageNum=1&pageSize=1000&dictType=mb_jb_type_new)
          source: null,
          platform: null,
          sortField: null
        },
        loading: true,
        total: 0,
        tableList: [],
        diseaseList: []
      };
    },
    created() {
      this.language = sessionStorage.getItem('language')
      window.addEventListener('setItem', this.languages);
      this.getData()
      this.getList()
    },
    mounted() {

    },
    methods: {
      // 监听session中language的变化
      languages(e) {
        console.log(e, 8888888888888)
        this.language = sessionStorage.getItem('language')
        console.log(this.language, 5555555555)
        this.getData()
        this.getList()
      },
      // 获取疾病下拉框数据
      getData() {
        this.axios.get('/system/dict/data/list?pageNum=1&pageSize=1000&dictType=mb_jb_type_new').then(res => {
          if (res.data.code == 200) {
            this.diseaseList = res.data.rows
          }
        })
      },
      // 获取列表数据
      getList() {
        this.loading = true
        var query = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          dataLanguage: this.language,//必传
          datasetName: this.queryParams.datasetName,//非必传
          disease: this.queryParams.disease,
          source: this.queryParams.source,
          platform: this.queryParams.platform,
          sortField: this.queryParams.sortField
        }
        this.axios.get('/chronic/difference/list', { params: query }).then(res => {
          if (res.data.code == 200) {
            this.tableList = res.data.rows
            this.total = res.data.total
          }
          this.loading = false
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          dataLanguage: this.language,//必传
          datasetName: null,//非必传
          disease: null, //疾病(下拉接口:/system/dict/data/list?pageNum=1&pageSize=1000&dictType=mb_jb_type_new)
          source: null,
          platform: null,
          sortField: null
        }
        this.handleQuery();
      },
      // 排序
      handleSortData(v) {
        let prop = v.prop;
        prop = prop.replace(/([A-Z])/g, "_$1").toLowerCase();
        if (prop[0] == "_") {
          prop = prop.slice(1);
        }
        let order = "";
        if (v.order) {
          order = v.order.slice(0, -6);
        }
        if (order) {
          this.queryParams.sortField = prop + " " + order;
        } else {
          this.queryParams.sortField = ""
        }
        this.handleQuery()
      },
    },
    beforeDestroy() {
      this.language = null
      window.removeEventListener('setItem', this.languages);
    },
  };
</script>
<style scoped>
  .appcontainer {
    width: 100%;
    background-color: #fff;
  }

  .toptips {
    width: 100%;
    margin-bottom: 14px;
    padding: 14px 20px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  }
</style>